<!-- 收银台 -->
<template>
  <div class="container"  style="padding: 20px;">
    <h2 class="scanpay-title">
      <img
        src="/static/images/logo-wechat.png"
        alt="" height="32"
        class="pull-left"
        style="margin-right:5px;">
      <span>微信支付</span>
      <span class="order-span">收款方：中国计划出版社</span>
      <span class="order-span">订单金额：<em class="order-money">￥{{state.orderInfo.goods_amount}}</em></span>
      <span class="order-span">订单名称：{{state.orderInfo.items[0].goods_title}}</span>
      <div class="scanpay-time">
        请在 <span>60</span> 秒内完成支付
      </div>
    </h2>

    <div class="scanpay scanpay-wechat">
      <div class="row">
        <div class="col-xs-12 col-sm-12">
          <div class="row">
            <div class="col-xs-4 col-sm-4"></div>
            <div class="col-xs-4 col-sm-4">
              <div class="scanpay-body">
                <div>
                  <img id="qrimg" :src="state.qrimg" style="margin: 0 auto; display: block; width: 100%"/>
                  <div id="expired" class="expired hidden">订单支付超时，请重新购买</div>
                  <div id="paid" class="paid hidden">订单已支付，正在跳转到结果页</div>
                </div>
                <div class="scanpay-tips">
                  <p>请使用微信扫一扫<br>扫描二维码进行支付</p>
                </div>
              </div>
            </div>
            <div class="col-sm-1"></div>
<!--            <div class="col-sm-6 hidden-xs">
              <div class="scanpay-screenshot">
                <img src="/static/images/screenshot-wechat.png" class="img-responsive" alt=""/>
              </div>
            </div>-->
          </div>
        </div>
      </div>
    </div>

  </div>
<pc-footer></pc-footer>
</template>
<script setup>
  import { computed, reactive } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import QRCode from 'qrcode';
  import PcNav from '@/sheep/components/pc-nav/pc-nav.vue';
  import PcFooter from '@/sheep/components/pc-footer/pc-footer.vue';



  const userInfo = computed(() => sheep.$store('user').userInfo);
  // 检测支付环境
  //
  const state = reactive({
    qrimg:'',
    redirect_url:'',
    orderSN:'',
    payStatus:0,
    intervalId:'',
  });
    function showQRCodeModal(qrCodeContent) {
      // 生成二维码的 Data URL
      QRCode.toDataURL(qrCodeContent, { width: 450, height: 450, margin:1 }, (err, url) => {
        if (err) {
          console.error('生成二维码失败', err);
          return;
        }
        /*console.log(url);
        return false;*/
        state.qrimg = url;
      });
      //alert();
    }

  async function checkPayStatus() {
    const {
      code,
      data
    } = await sheep.$api.order.detail(state.orderSN);

    state.orderInfo = data;

    if (state.orderInfo.status === 'unpaid') {
      state.payStatus = 1;
      return;
    }
    if (state.orderInfo.status === 'closed') {
      state.payStatus = -1;
      return;

    }
    if (state.orderInfo.status === 'paid') {
      state.payStatus = 2;
      //return;
    }
    //state.payStatus = 2;

  }
  function goresult(){
    checkPayStatus();
    //console.log(state.payStatus);
    if (state.payStatus === -1) {
      document.getElementById("expired").style.display = 'block';
      document.getElementById("#qrimg").style.display = 'none';
      clearInterval(state.intervalId);
      return false;
    }
    if (state.payStatus === 2) {
      document.getElementById("paid").style.display = 'block';
      clearInterval(state.intervalId);
      setTimeout(function(){
        window.location=state.redirect_url;
      },1000);
    }
  }


  onLoad((options) => {
    showQRCodeModal(options.qrCodeurl);
    state.redirect_url = options.redirect_url;
    state.orderSN = options.orderSN;
    state.intervalId = setInterval(goresult,4000);

  });
    /*onunload(()=>{
      clearInterval(this.intervalId)
    });*/

</script>

<style lang="scss" scoped>
  html,
  body {
    height: 100%;
  }
  body {
    padding-top: 50px;
    /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  :deep(){
    uni-page-body{
      background-color: #FFFFFF !important;
    }
    .foot{
      position: fixed;
      bottom: 0;
    }
  }

  .scanpay-body{
    width: 60%;
  }
  .order-span{
    margin-left: 30px;
    font-size: 14px;
    font-weight: normal;
  }
  .order-money{
    font-weight: bold;
    color: #d00500;
  }
  .img-addon {
    margin-bottom: 10px;
    width: 100%;
  }
  .img-hover:hover {
    opacity: 0.8;
  }
  .display-1 {
    font-size: 44px;
  }
  .display-4 {
    font-size: 24px;
    line-height: 32px;
  }
  /* Home Page Carousel */
  header.carousel {
    height: 50%;
  }
  header.carousel .item,
  header.carousel .item.active,
  header.carousel .carousel-inner {
    height: 100%;
  }
  header.carousel .fill {
    width: 100%;
    height: 100%;
  }
  .error-404 {
    font-size: 100px;
  }
  /* Pricing Page Styles */
  .price {
    display: block;
    font-size: 50px;
    line-height: 50px;
  }
  .price sup {
    top: -20px;
    left: 2px;
    font-size: 20px;
  }
  .period {
    display: block;
    font-style: italic;
  }
  #expired{
    color: #d00500;
  }
  #paid{
    color:#00c800;
  }
  #expired, #paid{
    font-size: 28rpx;
    text-align: center;
  }

  .hidden{
    display: none;
  }
  /* Footer Styles */
  /* Responsive Styles */
  @media (max-width: 991px) {
    .customer-img,
    .img-related {
      margin-bottom: 30px;
    }
  }
  @media (max-width: 767px) {
    .img-addon {
      margin-bottom: 15px;
    }
    header.carousel .carousel {
      height: 70%;
    }
  }
  .carousel-body {
    position: absolute;
    width: 100%;
    top: 25%;
    text-align: center;
    color: #fff;
  }
  .addonlist a > p {
    margin-bottom: 15px;
  }
  /* PC扫码支付 */
  .scanpay {
    margin-top: 20px;
  }
  .scanpay-title {
    margin: 30px 0 15px 40px;
    margin-bottom: 40px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    position: relative;
    font-size: 22px;
  }
  .scanpay-qrcode {
    margin-bottom: 20px;
    position: relative;
  }
  .scanpay-qrcode img {
    width: 100%;
    border: 1px solid #eee;
  }
  .scanpay-qrcode .expired {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.95;
    background: #fff url(../images/expired.png) center center no-repeat;
  }
  .scanpay-qrcode .paid {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.95;
    background: #fff url(../images/paid.png) center center no-repeat;
  }
  .scanpay-screenshot {
    padding: 0;
  }
  .scanpay-screenshot img {
    width: 100%;
  }
  .scanpay-tips {
    height: 60px;
    padding: 8px 0 8px 60px;
    background: #00c800 url(/static/images/scan.png) 10px 12px no-repeat;
    background-size: 36px 36px;
  }
  .scanpay-tips p {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: #fff;
    font-weight: 700;
  }
  .scanpay-time {
    font-size: 14px;
    margin-bottom: 15px;
    position: absolute;
    top: 15px;
    right: 10px;
    font-weight: normal;
    display: none;
  }
  .scanpay-time span {
    color: red;
  }
  .scanpay-order {
    margin-bottom: 5px;
  }
  .scanpay-order em {
    font-style: normal;
    color: #666;
  }
  .scanpay-order em.scanpay-price {
    color: #ff3333;
    font-weight: bold;
  }
  .scanpay-alipay .scanpay-tips {
    background-color: #4290e8;
  }
  @media (max-width: 767px) {
    .scanpay {
      margin-top: 20px;
    }
  }
  @media (max-height: 855px) and (min-width: 767px) {
    .scanpay {
      width: calc(130vh);
      min-width: 760px;
    }
  }
  .qrcode canvas,
  .qrcode img {
    width: 100%;
  }
</style>
